我們在網頁上有許多影片

<ul class="videos">
    <li data-time="5:43">
      Video 1
    </li>
    <li data-time="2:33">
      Video 2
    </li>
    <li data-time="3:45">
      Video 3
    </li>
    ...
    <li data-time="4:04">
      Video 58
    </li>
  </ul>

想要知道所有影片有多長時間

可以使用.querySelectorAll選取所有的data-time的Nodelist，將之轉成陣列
然後再使用.reduce()將它們一個一個加總
最後再經過計算
轉換成小時／分／秒

照著我們的思路
取得所有data-time的Nodelist
並使用展開語法(Spread syntax)轉成陣列
因為Nodelist無法使用Array的原型的methed
而我們要使用的是.map()還有reduce()

spread是ES6新增的語法，
可以將後面的內容拆成一項一項的
這時候用[]包起來
就會形成一個陣列

const timeNodes = document.querySelectorAll('[data-time]');
const totalSeconds = [...timeNodes]//轉陣列
    .map(node => toSecond(node.dataset.time))//將分秒切開並轉成時間
    .reduce((total,videoSec) => total + videoSec);//將秒數相加
    
function toSecond(time) {
const [mins, secs] = time.split(':').map(str => parseFloat(str));
// const [mins, seconds] = time.split(':').map(parseFloat); //也可以寫成這樣
    return mins * 60 + secs;
}

我們取得的陣列會是長成"5:40"這種字串
所以我們用.split(':')將它們以:來分開
接著使用parseFloat轉成數值
並使用解構賦值(Destructuring assignment)將它們存起來(mins,secs)
並return總秒數

拿到所有的秒數加總後
我們要將之轉換成小時、分鐘和秒數
計算過程如下

function toHMS(secondsLeft){
    const hrs = Math.floor(secondsLeft / 3600);
    const mins = Math.floor(secondsLeft % 3600 / 60);
    const secs = secondsLeft % 3600 % 60;
    return {
      hr: hrs,
      min: mins,
      sec: secs
    }
}
const totalTime = toHMS(totalSeconds);
console.log(totalTime)

demo
完整程式碼